<template>
    <div class="controller-box flex-align-center-col" >
        <div class="controller-head flex-center">
           <span >搜索 : </span>
            <input v-model="obj.search"
                   style="margin:0 20px 0 50px;font-size: 16px"
                    placeholder="请输入文章id或者名称" @keyup.enter="searchSubmit"
            />
            <el-button icon="el-icon-search" circle  @click="searchSubmit"></el-button>
            <el-button @click="reset">恢复默认</el-button>
        </div>



<!--        中部文章显示-->
        <el-divider style="width: 70%"></el-divider>
        <div class="controller-container">


<!--            内容-->
            <div class="controller-content">
                <table class="article-table">
                    <tr>
                        <td>id</td>
                        <td>标题</td>
                        <td>发布</td>
                        <td>置顶</td>
                        <td>浏览量</td>

                        <td>分类</td>
                        <td>创建时间</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="(item ,index) in obj.articles.list"
                        :style="{color:item.aPublish===0?'#8C502C':''}">

                        <td style="width: 100px" >{{item.aId}}</td>

                        <td style="width: 200px;max-width: 200px;overflow-x: hidden;white-space: nowrap;text-overflow: ellipsis">
                            <router-link :to="{
                                path: '/article',
                                query:{
                                    aId:item.aId,

                                }

                            }" class="title-link">
                                {{item.aTitle}}
                            </router-link>

                        </td>
                        <td>
                            {{item.aPublish===1?'公开👤':'私密🔒'}}
                        </td>
                        <td>
                            {{item.aTop===1?'置顶🔥':'未置顶💧'}}
                        </td>
                        <td>
                            {{item.view}}
                        </td>

                        <td>

                            <el-tag effect="dark">
                                {{item.tab.tName}}
                            </el-tag>

                        </td>
                        <td>
                            {{item.aCreateTime}}
                        </td>

                        <td class="table-menu-box">
                            <el-dropdown trigger="click">
                                  <span class="menu-dropdown-link">
                                      <i class="el-icon-setting"></i>
                                    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                                  </span>
                                <template #dropdown>
                                    <el-dropdown-menu divided="true" style="min-width: 100px">
                                        <el-dropdown-item icon="el-icon-edit" @click="edit(item)">编辑</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-remove" @click="deleteArt(item.aId)">删除</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-top" @click="setTop(item.aId,item.aTop,index)">置顶</el-dropdown-item
                                        >
                                        <el-dropdown-item icon="el-icon-unlock" @click="setPublish(item.aId,item.aPublish,index)">发行</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-price-tag" @click="setTab(item.aId,index)">标签
                                        </el-dropdown-item
                                        >

                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </td>

                    </tr>


<!--                    此处作用:保证一个表格有pageSize行，当列表大小<pageSize时,不至于size平分整个table-->
<!--                    填充剩余行-->
                    <tr v-for="i in (10- obj.articles.size)" style="color:transparent;">{{i}}</tr>
                </table>

            </div>




<!--            底部页面控制-->

            <div class="controller-content-footer flex-center-col">
                <el-divider style="width: 70%"></el-divider>
                <el-pagination
                        background
                        layout="total, prev, pager, next, jumper"
                        :page-size="obj.page.pageSize"
                        :total="obj.page.total"
                        :current-page="obj.page.currentPage"
                        @current-change="pageChange"
                >

                </el-pagination>
            </div>

        </div>
    </div>



    <!--                                        选择标签功能后-->
    <el-dialog
            title="提示"
            v-model="obj.showTabChoose"
            width="40%"
            :before-close="chooseTabClose"

    >
        <el-select v-model="obj.select.tId" filterable placeholder="请选择">
            <el-option
                    v-for="(item,index) in obj.tabs"
                    :key="item.tId"
                    :label="item.tName"
                    :value="item.tId"
                    @click="obj.select.tIndex=index"
            >
            </el-option>
        </el-select>
        <template #footer>
               <span class="dialog-footer">

                   <el-button type="primary" @click="changTab">确 定</el-button>
                   <el-button @click="obj.showTabChoose=!obj.showTabChoose">取 消</el-button>
             </span>
        </template>
    </el-dialog>


</template>

<script>
    import {reactive} from "@vue/reactivity";
    import axios from 'axios'
    import {onMounted} from "@vue/runtime-core";
    import {ElMessage} from "element-plus";
    import {useRouter} from "vue-router";
    import {errorMessage, getToken, goTop, rejectMessage, successMessage} from "@/assets/js/utils";






    export default {
        name: "ArticleController",
        setup(){
            const router=useRouter()
            let obj=reactive({
                search:"",
                hasSearch:false,
                all:true,
                page:{
                    pageSize:7,
                    total:0,
                    currentPage:1,

                },
                select:{
                  index:0,
                  tId:"选择一个标签",
                  tIndex:0,
                  aId:0
                },
                articles:[],
                tabs:[],
                showTabChoose:false,
                token:getToken()

            })

            // 点击换页后
            let pageChange=async (pageNum)=>{

                let data={}
                if(!obj.hasSearch){
                    // 如果没有搜索过，则查询所有文章
                    data=await getAxiosArticle(pageNum)


                }else{
                    // 如果搜索过,翻页根据搜索的信息
                    data=await getAxiosSearch(pageNum)
                }
                initArticles(data)
                obj.page.currentPage=pageNum
                goTop()
            }


            // axios获取文章
            function getAxiosArticle(pageNum) {
                return   axios.get("/api/article?pageNum="+pageNum+"&&all="+obj.all).then(resp=>resp.data)
            }




            // axios获取文章后初始化obj.articles和obj.page
            function  initArticles(data) {
                if(data.code===200){
                    obj.articles=data.data
                    obj.page.pageSize=data.data.pageSize
                    obj.page.total=data.data.total
                }else{
                    alert(data.msg)
                }
            }

            function edit(item){
                router.push({
                    name:'edit',
                    params:{
                        article:JSON.stringify(item)
                    }
                })
            }
            function deleteArt(aId){
                ElMessage.error({
                    message:"暂无该功能",
                    offset:100,
                    type:'error'
                })
            }

            // 设置置顶操作
            function setTop(aId,top,index){
                let t
                if(top===1){
                    t=0
                }else if(top===0){
                    t=1
                }
                axios.get("/api/ylb/article/upTop?id="+aId+"&&top="+t,{
                    headers:{
                        token:localStorage.getItem("token")
                    }
                }).then(resp=>{
                    if(resp.data.code===200){
                        successMessage('修改置顶成功')
                        obj.articles.list[index].aTop=t
                    }else{
                        if(rejectMessage(resp)){

                        }else{
                            errorMessage('修改置顶失败')
                        }
                    }
                })
            }

            // 设置发行操作
            function setPublish(aId,publish,index){
                let p
                if(publish===1){
                    p=0
                }else if(publish===0){
                    p=1
                }
                axios.get("/api/ylb/article/upPublish?id="+aId+"&&publish="+p,{
                    headers:{
                        token:localStorage.getItem("token")
                    }
                }).then(resp=>{
                    if(resp.data.code===200){
                        successMessage('修改发行成功')
                        obj.articles.list[index].aPublish=p
                    }else{
                        if(rejectMessage(resp)){

                        }else{
                            errorMessage('修改发行失败')
                        }

                    }
                })
            }


            // 选择要修改的标签后的操作
            function changTab() {
                if(obj.select.tId !== '选择一个标签'){
                    axios.get("/api/ylb/article/upTab?id="+obj.select.aId+"&&tId="+obj.select.tId,{
                        headers:{
                            token:localStorage.getItem("token")
                        }
                    }).then(resp=>{
                        if(resp.data.code===200){
                            ElMessage.success({
                                message:"修改标签成功",
                                offset:100,
                                type:'success'
                            })

                            // 更新文章标签内容
                            obj.articles.list[obj.select.index].tab=obj.tabs[obj.select.tIndex]

                            // dialog修改的变量初始化
                            initSelectTab()
                            // 关闭dialog
                            obj.showTabChoose=false

                        }else{
                            if(rejectMessage(resp)){

                            }else{
                                errorMessage("修改标签失败")
                            }
                        }
                    })
                }else {
                    errorMessage("请选择标签")
                }

            }



            // 初始化dialog变量
            function  initSelectTab() {
                obj.select.tId="请选择一个标签"
                obj.select.index=0
                obj.select.aId=0
            }
            // 关闭选择标签的跳窗
            function chooseTabClose(done) {
                initSelectTab()
                done()
            }



            // 点击菜单栏修改标签操作
            function setTab(aId,index){
                obj.select.aId=aId
                obj.select.index=index
                obj.showTabChoose=true
            }



            // axios搜索文章
            function  getAxiosSearch(pageNum) {

                return  axios.get('/api/article/search?info='+obj.search+"&&pageNum="+pageNum,{
                    headers:{
                        token:obj.token
                    }
                }).then(resp=>resp.data);

            }

            // 点击搜索文章的button绑定事件
            async function searchSubmit() {
                if (obj.search !== '') {
                    const data = await getAxiosSearch(1)
                    // 初始化文章变量
                    initArticles(data)
                    obj.hasSearch=true
                }
            }

            // 搜索后恢复查询全部
            function reset(){
                obj.hasSearch=false
                obj.search=''
                pageChange(1)
            }


            function getAxiosTab(){
                return  axios.get("/api/tabs").then(resp=>resp.data)
            }
            async function initTab(data) {

                if(data.code===200){
                   obj.tabs=data.data
                }
                else{
                    alert(data.msg)
                }
            }
            onMounted(async ()=>{
                const data=await getAxiosArticle(1)
                initArticles(data)
                const tabdata = await getAxiosTab()
                initTab(tabdata)
            })


            return{
                obj,
                pageChange,
                edit,
                deleteArt,
                setTab,
                setTop,
                setPublish,
                searchSubmit,
                reset,
                changTab,
                chooseTabClose
            }
        }

    }

</script>

<style scoped lang="less">
    .controller-box{
        width: 95%;
        background-color: white;

        .controller-head{
            width: 100%;
            height: 200px;
            input{
                width: 400px;
                height: 30px;
                border: none;
                outline: none;
                border-bottom: 2px solid grey;

            }
        }
        .controller-container{
            width: 100%;
            height: 1100px;


            .controller-content{
                width: 100%;
                height:90%;
                .article-table{
                    width: 100%;
                    height: 100%;


                    tr{

                        td{
                            .title-link{
                                text-decoration: none;
                                color: black;
                                transition: all 0.5s;
                            }

                            .title-link:hover{
                                color: tomato;
                            }
                        }
                    }


                    .table-menu-box{

                        button{

                        }
                    }
                }



            }
            .controller-content-footer{

            }
        }
    }

    .menu-dropdown-link{
        color: #028090;
        cursor: pointer;


    }
    .menu-dropdown-link:hover{

    }
</style>